<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
</head>

<body>
    <div class="header w">
        <div>
            <h1 class="logo"><img src="../image/logo.png" alt=""></h1>
            <i>欢迎登录</i>
        </div>
        <a href="#" class="home">进入网站首页<img src="../image/login-enter.png" alt=""></a>
    </div>
    <!--  -->
    <div class="login">
        <div class="page">
            <!-- 1 -->
            <div class="count">
                <!-- class做不了判断 ,所以定一个自定义id -->
                <a href="#" class="active login1" data-id="0">账户登录</a>
                <a href="#" class="login2" data-id="1">扫码登陆</a>
            </div>
            <!-- 2 -->
            <div class="message">

                <a class="loginEnter1 active" data-index="1">
                    <i class="iconfont icon-xinxi"></i>
                    使用短信登陆</a>
                <a class="loginEnter2 " data-index="2">
                    <i class="iconfont icon-xiaoren"></i>
                    使用账户登录</a>
            </div>
            <!-- 3 -->
            <div class="qrcode">
                <div>
                    <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="">
                    <p>打开<a href="#">小兔鲜APP</a>扫码登录</p>
                </div>
            </div>
            <!-- 第一个form -->
            <form action="" class="active users" data-index="1">

                <!-- 1 -->
                <div class="phone">
                    <div class="grey1">
                        <i class="iconfont .icon-xiaoren"></i>
                    </div>
                    <input type="text" placeholder="请输入用户名" class="userName">
                </div>
                <span class="warning"></span>

                <!-- 2 -->
                <div class="password">
                    <i></i>
                    <div class="grey2"></div>
                    <input type="password" placeholder="请输入密码" class="code">
                </div>
                <span class="warning"></span>

                <!-- 3 -->
                <div class="check">
                    <p><input type="checkbox" class="check">我已同意
                        <a href="#">《隐私条款》</a>和<a href="">《服务条款》</a>
                    </p>
                </div>
                <span class="warning"></span>
                <!-- 4 -->
                <div class="agree"><button class="yes">登录</button></div>
                <!-- 5 -->
                <div class="qq">
                    <div><img src="../image/Connect_logo_7.png" alt="">
                    </div>
                    <div>
                        <span>忘记密码</span>
                        <span class="confirm">免费注册</span>
                    </div>
                </div>
                <!-- 6 -->
                <div class="ckcode">
                </div>
            </form>


            <!-- 第二个form -->
            <form action="" data-index="2" class="num">
                <!-- 1 -->
                <div class="phone">
                    <i></i>
                    <div class="grey1"></div>
                    <input type="text" placeholder="请输入用手机号" class="phoneNumber">
                </div>
                <span class="warning warningNumber"></span>

                <!-- 2 -->
                <div class="password setTimeout2">
                    <i></i>
                    <div class="grey2"></div>
                    <input type="password" placeholder="请输入验证码" class="yzcode">
                    <div class="setTimeout" style="opacity: 0;">发送验证码</div>
                </div>
                <span class="warning warningYzcode"></span>

                <!-- 3 -->
                <div class="check">
                    <p><input type="checkbox" class="check">我已同意
                        <a href="#">《隐私条款》</a>和<a href="">《服务条款》</a>
                    </p>
                </div>
                <span class="warning"></span>
                <!-- 4 -->
                <div class="agree"><button>登录</button></div>
                <!-- 5 -->
                <div class="qq">
                    <div><img src="../image/Connect_logo_7.png" alt=""></div>
                    <div>
                        <span>忘记密码</span>
                        <span class="confirm">免费注册</span>
                    </div>
                </div>
                <!-- 6 -->
                <div class="ckcode"></div>
        </div>
        </form>

    </div>
    </div>
    <footer class="w">
        <div>
            <p>
                <a>关于我们</a>
                <a>帮助中心</a>
                <a>售后服务</a>
                <a>配送与验收</a>
                <a>商务合作</a>
                <a>搜素推荐</a>
                <a>友情链接</a>
            </p>
            <p>CopyRight © 小兔鲜儿</p>
        </div>
    </footer>
    <script src="../js/login.js"></script>
</body>

</html>